<template>
  <div class="Home">
    <van-nav-bar title="千禧婚礼" />
    <div class="swipe">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <van-image width="150px" height="150px" :src="images[0]" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image width="150px" height="150px" :src="images[1]" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image width="150px" height="150px" :src="images[0]" />
        </van-swipe-item>
        <van-swipe-item>
          <van-image width="150px" height="150px" :src="images[0]" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <van-grid :border="false" :column-num="4">
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-1.jpg" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-2.jpg" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
      </van-grid-item>
      <van-grid-item>
        <van-image src="https://img01.yzcdn.cn/vant/apple-3.jpg" />
      </van-grid-item>
    </van-grid>
    <van-grid clickable :column-num="2">
      <van-grid-item icon="home-o" text="路由跳转" to="/" />
      <van-grid-item icon="search" text="URL 跳转" url="/vant/mobile.html" />
      <van-grid-item icon="home-o" text="路由跳转" to="/" />
      <van-grid-item icon="search" text="URL 跳转" url="/vant/mobile.html" />
      <van-grid-item icon="home-o" text="路由跳转" to="/" />
      <van-grid-item icon="search" text="URL 跳转" url="/vant/mobile.html" />
      <van-grid-item icon="home-o" text="路由跳转" to="/" />
      <van-grid-item icon="search" text="URL 跳转" url="/vant/mobile.html" />
      <van-grid-item icon="home-o" text="路由跳转" to="/" />
      <van-grid-item icon="search" text="URL 跳转" url="/vant/mobile.html" />
      <van-grid-item icon="home-o" text="路由跳转" to="/" />
      <van-grid-item icon="search" text="URL 跳转" url="/vant/mobile.html" />
      <van-grid-item icon="home-o" text="路由跳转" to="/" />
      <van-grid-item icon="search" text="URL 跳转" url="/vant/mobile.html" />
    </van-grid>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
    };
  },
};
</script>

<style lang='less' scoped>
.my-swipe {
  .van-swipe-item {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
    img {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
}
</style>